import React from "react";
import { Spin,message } from "antd";
import loadjs from "loadjs";
import { inject, observer } from "mobx-react";
import "./index.less";
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcAnalysisDesignerStore')
@observer
export default class AnalysisDesigner extends React.Component {
  constructor(props) {
    super();

    this.store = props.edcAnalysisDesignerStore;
    this.state = {
      loaded: false
    };
    message.config({ top: 60});
    this.store.init(props.params.appid);
  }

  componentDidMount() {
    this.loadEdcBoard();
  }

  loadEdcBoard() {
    if (loadjs.isDefined('weaEdcBoard')) {
      this.setState({ loaded: true });
      return;
    }

    const libUrl = '/spa/edc/static4engine/board4com/';

    loadjs([
      `${libUrl}index.css`,
      `${libUrl}index.js`,
      '/font/edc/board/iconfont.js',
    ], 'weaEdcBoard', {
      success: () => {
        this.setState({ loaded: true });
      }
    });
  }

  renderSpinTip(spining, tip) {
    return (
      <Spin
        spining={spining}
        style={{ width: '100%', paddingTop: 200 }}
        tip={<div style={{ paddingTop: 10 }}>{tip}</div>}
      />
    );
  }

  render() {
    const { loaded } = this.state;
    const { board } = this.store;

    if (!loaded || !board) {
      return this.renderSpinTip(!loaded, getLabel(502288,'正在加载分析面板, 请稍候...'));
    }

    const { BoardDetail } = window.weaEdcBoard.com;

    return (
      <BoardDetail
        readonly={this.props.readonly}
        id={board.dashboardId} 
        path={`/edc/widget/chart`}
      />
    );
  }
}